<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<weather-widget city="绍兴"></weather-widget>
			<weather-widget city="台州"></weather-widget>
			<weather-widget city="宁波"></weather-widget>
		</div>
		<template id="tpl_weather">
			<div class="weather-widget">
				<h2>天气信息</h2>
				<div v-if="weatherInfo">
					<p><strong>城市:</strong> {{ weatherInfo.city }}</p>
					<p><strong>天气:</strong> {{ weatherInfo.type }}</p>
					<p><strong>温度:</strong> {{ weatherInfo.temp }}°C</p>
					<hr>
				</div>
				<div v-else>
					<p>没有与该城市匹配的天气信息哦！</p>
				</div>
			</div>
		</template>
		<script>
			let app = Vue.createApp({})
			
			app.component('weather-widget',{
				template:'#tpl_weather',
				props:{
					city:{
						type:String,
						required:true
					}
				},
				data() {
					return{
						list:[
							{city:'绍兴',temp:'18°',type:'多云'},
							{city:'杭州',temp:'17°',type:'晴天'},
							{city:'宁波',temp:'15°',type:'阴天'},
							{city:'嘉兴',temp:'20°',type:'多云'},
							{city:'台州',temp:'18°',type:'小雨'}
						]
					}
				},
				computed:{
					weatherInfo(){
						//返回某城市的天气数据
						//根据接收到的city到list中找到的数据
						return this.list.find(item => item.city === this.city) || null;
					}
				}
			})
			app.mount('#app')
		</script>
	</body>
</html>